<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="jquery/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" id="id">
<input type="text" id="username">
<button id="01">ajax</button>
<button id="02">表单数据</button>
<button id="03">get方式</button>
</body>
<script>
    $(function () {
        $("#01").click(function () {
            let id=$("#id").val();
            let username=$("#username").val();
            $.ajax({
                url:"/test04",//请求路径
                type:"post",// 请求的方式，不区分大小写
                cache:false,// 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",//必须写！！！,不写默认基于表单请求
                data:JSON.stringify({
                    id:id,
                    username:username
                }),
                datatype:"json",// 返回类型，text文本、html页面、json数据
                success:function (response) {
                    console.log("返回:"+response);
                    console.log("数据:"+JSON.stringify(response));
                },
                error:function (response) {
                    console.log("出错返回："+response);
                    console.log("出错数据:"+JSON.stringify(response))
                }
            });
        });
        $("#02").click(function () {
            let id=$("#id").val();
            let username=$("#username").val();
            $.ajax({
                url:"/test03",//请求路径
                type:"post",// 请求的方式，不区分大小写
                cache:false,// 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                //contentType:"application/json;charset=utf-8",//必须写！！！,不写默认基于表单请求
                data:{
                    myId:id,
                    name:"gxa"
                },
                datatype:"json",// 返回类型，text文本、html页面、json数据
                success:function (response) {
                    console.log("返回:"+response);
                    console.log("数据:"+JSON.stringify(response));
                },
                error:function (response) {
                    console.log("出错返回："+response);
                    console.log("出错数据:"+JSON.stringify(response))
                }
            });
        });
        $("#03").click(function () {
            let id=$("#id").val();
            let username=$("#username").val();
            $.ajax({
                url:"/test03",//请求路径
                type:"get",// 请求的方式，不区分大小写
                cache:false,// 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                //contentType:"application/json;charset=utf-8",//必须写！！！,不写默认基于表单请求
                data:{
                    myId:id,
                    name:"gxa"
                },
                datatype:"json",// 返回类型，text文本、html页面、json数据
                success:function (response) {
                    console.log("返回:"+response);
                    console.log("数据:"+JSON.stringify(response));
                },
                error:function (response) {
                    console.log("出错返回："+response);
                    console.log("出错数据:"+JSON.stringify(response))
                }
            });
        });
    })

</script>
</html>